<template>
  <!-- 头部 -->
  <div class="header">
    <div class="h-left">
      <van-icon @click="todozhuye" name="arrow-left" />
      <a href="#">
        <span>
          成就点
          <van-icon name="question-o" />
        </span>
      </a>
      <i>0</i>
    </div>
  </div>
  <!-- 成就勋章 -->
  <div class="main">
    <!-- 个人成就内容 -->
    <div class="person">
      <p>个人成就</p>
      <ul class="person-one">
        <li class="person-one-one" v-for="item in list" :key="item.name">
          <img :src="require('./../assets/image/' + item.src)" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <!-- 活动成就 -->
    <div class="activity">
      <p>活动成就</p>
    </div>
  </div>
</template>

//
<script>
import { ref, onMounted } from "vue";
import { getAchievementApi } from "./../utils/api";
//import { useStore } from 'vuex'
export default {
  setup() {
    const list = ref([]);
    const cout = ref(5);
    const src = ref();
    // const store = useStore()

    //const token = computed(() => {});
    onMounted(async () => {
      const token = localStorage.getItem("token");

      const res = await getAchievementApi({ token });

      if (res.status === 0) {
        list.value = res.results.map(ele => {
          ele.src = ele.src.split("/").pop();
          return ele;
        });
        // list.value = res.results;
      }
    });

    return {
      cout,
      list,
      src,
    };
  },
  methods: {
    todozhuye() {
      this.$router.push("/home/achievement");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 300px;
  background-image: url(./../assets/image/成就头部背景.png);
  background-repeat: no-repeat;
  background-size: 100%;
  .h-left {
    height: 150px;
    display: flex;
    flex-direction: column;
    color: white;
    padding: 20px;
    justify-content: space-between;
    .van-icon {
      font-size: 15px;
    }
    a {
      color: white;
    }
    span {
      font-size: 18px;
    }
    i {
      font-size: 45px;
    }
  }
}
.main {
  position: absolute;
  width: 100%;
  height: 400px;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  p {
    padding: 15px 15px 35px 15px;
    font: 600 23px/23px "";
    color: #666666;
  }
}
.person {
  margin: auto;
  border-radius: 20px;
  width: 90%;
  box-shadow: 0 0 8px 1px rgb(196, 196, 196);
  background: rgb(255, 255, 255);
  .person-one {
    width: 85%;

    // background: blueviolet;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    .person-one-one {
      width: 33%;
      //background: violet;
      text-align: center;
      img {
        display: block;
        margin: auto;
        width: 80px;
        height: 80px;
      }
      > p {
        padding: 10px 0 20px 0;
        font-size: 19px;
      }
    }
  }
}
.activity {
  width: 90%;
  height: 200px;
  margin: auto;
  margin-top: 20px;
  border-radius: 20px;
  box-shadow: 0 0 8px 1px rgb(196, 196, 196);
  background: rgb(255, 255, 255);
  background-image: url(./../assets/image/成就活动成就.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: 35px;
  // p{
  //   padding: 15px;
  //   font:600 23px/23px "" ;
  //   color: #666666;
  // }
}
</style>
